<template>
    <div>
        <x-header :left-options="{backText: ''}">选择时间</x-header>
        <!--<div class="serchDiv" @click="showAddress=true">-->
            <!--<span >请选择 省/市/县/医院</span>-->
            <!--<span></span>-->
            <!--<x-icon type="ios-arrow-down" size="25" ></x-icon>-->
        <!--</div>-->
        <div class="address" style="border: 1px solid #e6e6e6;">
            <group title="double columns">
                <popup-picker :title="title1" :data='years' v-model='year1' :columns="2">
                    <template slot="title" ><!-- use scope="props" when vue < 2.5.0 -->
                        <span style="height:24px;" class="selectAddress">
                        <span style="vertical-align:middle;color:#aeaeae" v-if="year1.length==0">请选择 省/市/县/医院</span>
                            <!--<x-icon type="ios-arrow-down" size="25" ></x-icon>-->
                  </span>
                    </template>
                </popup-picker>
            </group>
        </div>


        <div class="selectTime">
            <div class="left">
                <x-button  :class="disabled?'disabled':''" @click.native="preDay">往前</x-button>
            </div>
            <group class="time">
                <calendar v-model="timeSelect" :title="''" disable-past class="date" @on-change="onChange"></calendar>
            </group>
            <div class="right">
                <x-button @click.native="nextDay">往后</x-button>
            </div>
        </div>
        <toast v-model="showAlert" :time="1000" type="text" width="12em">{{alertContent}}</toast>
        <!--<div v-transfer-dom>-->
            <!--<popup v-model="showAddress" :hide-on-blur=false>-->
                <!--<div class="popup">-->
                    <!--<div class="layui-layer-title">-->
                        <!--<span>请选择您所在的医院</span>-->
                        <!--<div></div>-->
                        <!--<x-icon type="ios-close-empty" size="30" @click="showAddress=false"></x-icon>-->
                    <!--</div>-->
                    <!--<div class="selectAddress">-->
                          <!---->
                    <!--</div>-->
                    <!--&lt;!&ndash;<group>&ndash;&gt;-->
                        <!--&lt;!&ndash;&lt;!&ndash;<popup-picker :title="title1" :data="list1" v-model="value1"  @on-change="onChange" :placeholder="'1'"></popup-picker>&ndash;&gt;&ndash;&gt;-->
                        <!--&lt;!&ndash;<picker :data='years' v-model='year1' ></picker>&ndash;&gt;-->
                    <!--&lt;!&ndash;</group>&ndash;&gt;-->
                    <!--&lt;!&ndash;<group>&ndash;&gt;-->
                        <!--&lt;!&ndash;<picker :data='years' v-model='year1'></picker>&ndash;&gt;-->

                    <!--&lt;!&ndash;</group>&ndash;&gt;-->
                    <!--&lt;!&ndash;<group>&ndash;&gt;-->

                    <!--&lt;!&ndash;</group>&ndash;&gt;-->
                    <!--&lt;!&ndash;this is the first popup&ndash;&gt;-->
                <!--</div>-->
            <!--</popup>-->
        <!--</div>-->
    </div>
</template>
<script>
    // let years = []

    import { TransferDom,PopupPicker} from 'vux';
    import {DataService} from "../../axios/api";
    export default {
        name:"timeappointment",
        directives: {
            TransferDom,
        },
        // components:{
        //     popupPicker:PopupPicker,
        // },
        data(){
            return{
                value1:['iPhone'],
                timeSelect:"",
                disabled:true,
                showAlert:false,
                alertContent:'',
                showAddress:true,
                years:[],
                year1:[],
                title1: '手机机型',
                list1: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],
                address:{
                    province:'',
                    city:'',
                    area:'',
                    hospital:'',
                }
            }
        },
        components:{

        },
        methods:{
            onChange(){
                console.log(new Date(this.timeSelect).getTime(),new Date(this.getTime()).getTime());
                this.disabled = new Date(this.timeSelect).getTime() == new Date(this.getTime()).getTime()?true:false;
            },
            //获取明天的时间
            nextDay(){
                this.disabled = false;
                let time = new Date(this.timeSelect);
                time = time.getTime() + 60*60*24*1000;
                time = new Date(time);
                this.timeSelect = this.getTime(time)
            },
            //获取前一天时间
            preDay(){
                if(this.disabled){
                    this.showAlert = true;
                    this.alertContent = '今天之前的时间不能选择';
                    return false;
                }
                let time = new Date(this.timeSelect);
                time = time.getTime() - 60*60*24*1000;
                time = new Date(time);
                this.timeSelect = this.getTime(time);
                new Date(this.timeSelect).getTime() == new Date(this.getTime()).getTime()?this.disabled = true:false;
            },
            //获取当天的时间
            getTime(t=new Date()){
                let time = new Date(t);
                let year = time.getFullYear()
                let month = time.getMonth()+1;
                let day = time.getDate();
                return `${year}-${month>=10?month:'0'+month}-${day>=10?day:'0'+day}`
            },
            onItemClick(index){
                console.log(index)
            },
            getAddress(){
                DataService.post('EngineerSchedule/loadCity?pid=0').then(res=>{
                    console.log(res);
                })
                // EngineerSchedule/loadCity?pid=0
            }
        },
        mounted() {
            console.log(this.$route.params.data);
            this.timeSelect = this.getTime();
            for (var i = 2000; i <= 2030; i++) {
                this.years.push({
                    name: i + '年',
                    value: i + ''
                })
            }
            this.years = [this.years,this.years]
            // this. getAddress();
        }
    }
</script>

<style lang="less" scoped>
    @import '../common/css/home.less';
    @import '~vux/src/styles/close.less';
    .selectAddress{
        display: flex;
        align-items: center;

    }
    /deep/ .vux-popup-picker-select{
        text-align: left !important;
        width: 100%;

    }
    /deep/ .vux-popup-picker-value.vux-cell-value{
        display:block;
        width: calc(100vw - 40px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /deep/ .vux-header{
        position: static;
    }
    /deep/ .weui-cells{
        font-size: 14px;
        padding: 0;
    }
    /deep/ .weui-cells.vux-no-group-title{
        margin-top: 0;
    }
    /deep/ .weui-cells:before{
        border: none;
    }
    /deep/ .vux-calendar:before{
        border: none;
    }
    /deep/ .weui-cells:after{
        border: none;
    }
    .date{
        border: 1px solid #e6e6e6;
        /*/deep/ .weui-cells{*/
            /*font-size: 14px;*/
            /*padding: 0;*/
        /*}*/
        /deep/ .weui-cell.vux-tap-active.weui-cell_access{
            padding: 5px 10px;
        }
    }
    #app{
        height: auto;
    }
    /deep/ .vux-x-icon{
        fill: #a0a0a0;
    }
    .serchDiv {
        width: calc(100vw - 30px);
        height: 36px;
        background: #fff;
        padding: 0 15px;
        border-bottom: 1px solid #efefef;
        display: flex;
        font-size: 14px;
        color: #a0a0a0;
        align-items: center;
        justify-content: space-between;
    }
    .selectTime{
        margin-top: 15px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        >div.time{
            width: 40%;
        }
        .left,.right{
            width: 30%;
            display: flex;
            border: none;

        }
        .left{
            flex-direction: row-reverse;
            /deep/ button.weui-btn{
                border-radius: 30px 0 0 30px;
                margin-right: 5px;
            }
            /deep/ button.weui-btn.disabled{
                background: #efefef;
            }
        }
        .right{
            /deep/ button.weui-btn{
                border-radius: 0 30px 30px 0;
                margin-left: 5px;
            }
        }
        .weui-btn:after{
            border: none;
            /*height: 128px;*/
        }
        /deep/ button.weui-btn{
            width: 70%;
            margin: 0;
            font-size: 12px;
            background: #89dfff;
            color: #fff;
        }
    }
    /deep/ .weui-cell_access .weui-cell__ft{
        text-align: center;
    }
    /deep/ .weui-cell_access .weui-cell__ft:after{
        width: 0;
        border: none;

    }
    .showAddress{
        height: 50%;
    }
    /deep/ .vux-popup-dialog{
        background: #fff;
    }
    .popup{
        padding-bottom:15px;
        height:calc(100vh - 100px);
        .layui-layer-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0 0 20px;
            height: 42px;
            line-height: 42px;
            border-bottom: 1px solid #eee;
            font-size: 14px;
            color: #333;
            overflow: hidden;
            background-color: #F8F8F8;
            border-radius: 2px 2px 0 0;
        }
        .selectAddress{
            height: 42px;
            line-height: 42px;
            border-bottom: 1px solid #eee;
            font-size: 14px;
            color: #333;
            border-bottom: 1px solid #efefef;
        }
    }
    /*/deep/ .weui-cells .vux-no-group-title{*/
        /**/
    /*}*/
</style>
